<template>
  <div class="resetpassword">
    <div class="reset">
      <div class="title">
        <p>找回密码</p>
      </div>
      <div class="form">
        <div>
          <p>请输入您在吾志的注册邮箱</p>
          <input v-model="userEmail" type="text" />
        </div>
        <div>
          <p>新密码</p>
          <input type="password" />
        </div>
        <div>
          <p>确认密码</p>
          <input type="password" />
        </div>
        <div class="code">
          <p>验证码</p>
          <input type="text" />
          <span @click="getCode">{{ code }}</span>
        </div>
        <div>
          <button>重设密码</button>
        </div>
      </div>
      <transition
        enter-to-class="animate__animated animate__fadeInUp"
        enter-active-class="animate__animated animate__fadeInUp"
        leave-to-class="animate__animated animate__fadeInUp"
        leave-active-class="animate__animated animate__fadeInUp"
      >
        <div v-if="isReset" class="istip">
          <div class="tip">
            <p>
              您正在重置密码，验证码为<span>{{ code }}</span
              >如果不是您本人的操作，您的密码很可能已经泄露。
            </p>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "webreset",
  data() {
    return {
      userEmail: "",
      isReset: false,
      code: "获取验证码",
      timer: null,
      num: 60,
      num2: 0,
      t: null,
      q: null,
    };
  },
  methods: {
    myRandom() {
      return Math.floor(Math.random() * (100 - 10) + 10);
    },
    getCode() {
      this.code = this.num;
      this.t = setInterval(() => {
        this.num--;
        this.code = this.num;
        if (this.num < 0) {
          this.num = 0;
          this.code = "重新获取验证码";
        }
        if (this.num == 55) {
          //   clearInterval(this.timer);

          let v1 = this.myRandom();
          let v2 = this.myRandom();
          let code = v1.toString() + v2.toString();
          this.timer = setTimeout(() => {
            this.isReset = true;
            this.code = code;
            this.q = setInterval(() => {
              this.num2++;
              if (this.num2 > 5) {
                this.isReset = false;
                this.num2 = 0;
                this.num = 60;
              }
            }, 1000);
          }, 5000);
        }
      }, 1000);
    },
    myReset() {
      if (this.userEmail.length == 0) {
        alert("请输入邮箱");
        return false;
      }
      let useremail = JSON.parse(localStorage.getItem("userMsg")).email;
      if (this.userEmail == useremail) {
        this.isReset = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.resetpassword {
  width: 100%;
  .reset {
    width: 100%;
    .title {
      margin: 20px 0;
      p {
        color: #808080;
        font-size: 20px;
      }
    }
    .form {
      div {
        margin: 15px 0;
        p {
          margin-bottom: 10px;
        }
        input {
          border: 1px solid #ccc;
          border-radius: 4px;
          width: 210px;
          height: 35px;
        }
        button {
          border: 1px solid #ccc;
          color: #808080;
          font-size: 16px;
          padding: 5px 10px;
          border-radius: 3px;
          cursor: pointer;
          &:active {
            color: #000;
          }
        }
      }
      .code {
        input {
          width: 80px;
        }
        span {
          display: inline-block;
          border: 1px solid #ccc;
          color: #808080;
          font-size: 22px;
          font-weight: bold;
          border-radius: 5px;
          padding: 0 5px;
          vertical-align: middle;
          cursor: pointer;
          text-shadow: -1px 1px 5px #b54b00;
          margin-left: 10px;
        }
      }
    }
    .istip {
      width: 200px;
      height: 200px;
      background-color: #f3d652;
      border-radius: 10px;
      padding: 5px;
      box-sizing: border-box;
      position: fixed;
      right: 20px;
      bottom: 0;
      .tip {
        border: 1px dashed #ccc;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        padding: 10px 10px;
        box-sizing: border-box;
        p {
          line-height: 22px;
          font-size: 14px;
          letter-spacing: 2px;
          span {
            text-decoration: underline;
            font-size: 22px;
            color: #0099ff;
          }
        }
      }
    }
  }
}
</style>